@base-n: 100;
@base-height: 1080;
@rem-pre-px: 1rem * (@base-n / @base-height);

.top10-vuls {
  display: flex;
  justify-content: center;
  min-height: 140 * @rem-pre-px;
  .vuls-item {
    min-width: 28 * @rem-pre-px;
    max-width: 102 * @rem-pre-px;
    margin: 26 * @rem-pre-px 16 * @rem-pre-px;
    .percent-bar {
      width: 28 * @rem-pre-px;
      height: 106 * @rem-pre-px;
      margin: 0 auto 10 * @rem-pre-px;
      border: 1px solid #ffffff;
      border-bottom-left-radius: 4 * @rem-pre-px;
      border-bottom-right-radius: 4 * @rem-pre-px;
      transform: rotate(180deg);
      cursor: pointer;
      .percent-grid {
        height: 6 * @rem-pre-px;
        margin: 4 * @rem-pre-px 2 * @rem-pre-px;
        background-color: #fff;
      }
    }
    .vuls-name {
      min-width: 10%;
      text-align: center;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      cursor: pointer;
    }
    .vuls-name.fatal {
      color: #a00000;
    }
    .vuls-name.high {
      color: #ee3e41;
    }
    .vuls-name.middle {
      color: #f67e23;
    }
    .vuls-name.low {
      color: #fed831;
    }
  }
  .top10-vuls-empty {
    margin-top: 36 * @rem-pre-px;
    font-size: 22 * @rem-pre-px;
  }
}
.top10-vuls-tooltip {
  .ant-tooltip-content {
    background: rgba(50, 50, 50, 0.7);
  }
  .ant-tooltip-inner {
    background: none;
  }
  .ant-tooltip-arrow {
    border-top-color: rgba(50, 50, 50, 0.7);
  }
}
